<template>
  <view class="dy-scroll-container">
    <dy-navbar title="section" />
    <scroll-view class="dy-scroll" scroll-y="">
      <!-- 基础用法 -->
      <dy-card>
        <template slot="body">
          <dy-section title="基础用法" />
        </template>
      </dy-card>
      <!-- 带描述 -->
      <dy-card>
        <template slot="body">
          <dy-section title="基础用法" desc="带描述" />
        </template>
      </dy-card>
      <!-- 显示右箭头 -->
      <dy-card>
        <template slot="body">
          <dy-section title="显示右箭头" extra-text="更多" show-right-icon />
        </template>
      </dy-card>
      <!-- 隐藏左侧竖线 -->
      <dy-card>
        <template slot="body">
          <dy-section title="隐藏左侧竖线" extra-text="更多" :line="false" show-right-icon />
        </template>
      </dy-card>
      <!-- 自定义左侧竖线样式 -->
      <dy-card>
        <template slot="body">
          <dy-section
            title="自定义左侧竖线样式"
            extra-text="更多"
            :line-style="{ width: '12rpx', backgroundColor: '#ff508a' }"
            show-right-icon
          />
        </template>
      </dy-card>
      <!-- 显示下边框 -->
      <dy-card>
        <template slot="body">
          <dy-section title="显示下边框" extra-text="更多" border show-right-icon />
        </template>
      </dy-card>
      <!-- 自定义标题 -->
      <dy-card>
        <template slot="body">
          <dy-section show-right-icon>
            <dy-loading show />
            <text>自定义标题</text>
          </dy-section>
        </template>
      </dy-card>
      <!-- 自定义右侧箭头 -->
      <dy-card>
        <template slot="body">
          <dy-section
            title="自定义右侧箭头"
            show-right-icon
            :right-icon="{ name: 'next', color: '#cccccc' }"
          />
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Search'
}
</script>
